<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style>
			.mui-scroll-wrapper {
				background-color: #fff;
				height: 50px !important;
			}
			.mui-scroll {
				display: flex;
				align-items: center;
				height: 50px !important;
			}
			.mui-control-item {
				color: #777 !important;
				padding: 0 10px !important;
			}
			.mui-active {
				font-size: 20px;
				color: #FF8800 !important;
				border-bottom: none !important;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
			    <div class="mui-scroll">
			        <a
			        		v-for="item in tabNav"
			        		class="mui-control-item"
			        		:class="{'mui-active': item.type == 1}" type="1"
			        		:data-wid="item.wid">
			            {{item.name}}
			        </a>
			    </div>
			</div>
		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/webviewGroup.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
		<script type="text/javascript">
			(function() {
				var vm = new Vue({
					el: '.mui-content',
					data: {
						tabNav: [{
							name: '精选', type: 1, wid: '/html/top-tab/top-tab-webview-1.html' 
						}, {
							name: '电影', type: 2, wid: '/html/top-tab/top-tab-webview-2.html' 
						}, {
							name: '电视剧', type: 3, wid: '/html/top-tab/top-tab-webview-3.html' 
						}, {
							name: '综艺', type: 4, wid: '/html/top-tab/top-tab-webview-4.html' 
						}, {
							name: '搞笑', type: 5, wid: '/html/top-tab/top-tab-webview-5.html' 
						}, {
							name: '娱乐', type: 6, wid: '/html/top-tab/top-tab-webview-6.html' 
						}, {
							name: '写真', type: 7, wid: '/html/top-tab/top-tab-webview-7.html' 
						}, {
							name: '写真', type: 7, wid: '/html/top-tab/top-tab-webview-7.html' 
						}, {
							name: '写真', type: 7, wid: '/html/top-tab/top-tab-webview-7.html' 
						}]
					}
				});
				
				mui.init();
				mui.plusReady(function() {
					var _self = plus.webview.currentWebview();
					var tabItemsPage = [], i = 0;
					for (i; i < vm.$data.tabNav.length; i++) {
						tabItemsPage.push({
							id: vm.$data.tabNav[i].wid,
							url: vm.$data.tabNav[i].wid,
							styles: {
								top: 55,
								bottom: 50
							},
							extras: {}
						})
					}

					var group = new webviewGroup(_self.id, {
						items: tabItemsPage,
						onChange: function(obj) {
							var c = document.querySelector(".mui-control-item.mui-active");
							if(c) {
								c.classList.remove("mui-active");
							}
							var target = document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")");
							target.classList.add("mui-active");
							if(target.scrollIntoView) {
								target.scrollIntoView();
							}
						}
					});
					mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {
						var wid = this.getAttribute("data-wid");
						group.switchTab(wid);
					});					
				});
			})();
		</script>
	</body>

</html>